<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-12-21 10:23:39
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-12-21 17:49:55
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24">
            <div class="card-container" :style="`width:${viewwidth}px;height:${viewHeight - 100}px`">
                <el-row>
                    <el-col :span="24" style="text-align: right;">
                        <el-button style="width: 150px;height: 40px;font-size: 16px;" type="primary"> 新增 <el-icon
                                class="el-icon--right">
                                <Plus />
                            </el-icon></el-button>
                    </el-col>
                </el-row>
                <el-row v-loading="listLoading">
                    <el-col :span="12" v-for="(item, index) in rules" :key="index"
                        style="padding: 10px;box-sizing:border-box">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span>{{ item.rule_id }}</span>
                                    <el-button-group size="small">
                                        <el-button class="button" link type="primary">编辑</el-button>
                                        <el-button class="button" link type="primary"
                                            @click="deleteClickHandler(index)">删除</el-button>
                                    </el-button-group>
                                </div>
                            </template>
                            <p style="color: #999;margin-bottom: 20px;">
                                {{ item.description }}
                            </p>
                            <div style="height: 50px;font-weight: 600;">{{ item.expression }}</div>
                            <template #footer>
                                <el-button class="button">规则导出</el-button>
                            </template>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { Delete, Edit, Search, Plus, Upload } from '@element-plus/icons-vue'
let viewHeight = ref(window.innerHeight);
let viewwidth = ref(window.innerWidth);
let listLoading = ref(false)
let rules = reactive([
    {
        "rule_id": "规则一",
        "description": "句中若存在'均小于'，在提取的数字实体前添加",
        "expression": "if '均小于' in sentence: rule_res = ['均小于' + ele for ele in rule_res]"
    },
    {
        "rule_id": "规则二",
        "description": "句中若存在'以上'，在提取的数字实体后添加",
        "expression": "elif '以上' in sentence: rule_res = [ele + '以上' for ele in rule_res]"
    },
    {
        "rule_id": "规则三",
        "description": "句中若存在'均不超过'，在提取的数字实体前添加",
        "expression": "elif '均不超过' in sentence: rule_res = ['均不超过' + ele for ele in rule_res]"
    },
    {
        "rule_id": "规则四",
        "description": "句中若存在'大都超过'，在提取的数字实体前添加",
        "expression": "elif '大都超过' in sentence: rule_res = ['大都超过' + ele for ele in rule_res]"
    },
    {
        "rule_id": "规则五",
        "description": "句中若存在'都接近于'，在提取的数字实体前添加",
        "expression": "elif '都接近于' in sentence: rule_res = ['都接近于' + ele for ele in rule_res]"
    },
    {
        "rule_id": "规则六",
        "description": "句中若存在'均达到'，在提取的数字实体前添加",
        "expression": "elif '均达到' in sentence: rule_res = ['均达到' + ele for ele in rule_res]"
    },
    {
        "rule_id": "规则七",
        "description": "句中若存在'均超过'，在提取的数字实体前添加",
        "expression": "elif '均超过' in sentence: rule_res = ['均超过' + ele for ele in rule_res]"
    },
    {
        "rule_id": "规则八",
        "description": "句中若存在'低于'，在提取的数字实体前添加",
        "expression": "elif '低于' in sentence: rule_res = ['低于' + ele for ele in rule_res]"
    }
])

const deleteClickHandler = function (index) {
    listLoading.value = true
    setTimeout(() => {
        rules.splice(index, 1)
        listLoading.value = false
    }, 300);
}
</script>
    
<style lang="scss" scoped>
.card-container {
    width: 100%;
    box-sizing: border-box;
    padding: 40px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {}
}
</style>
<style lang="scss"></style>